import React, { FC, Fragment } from "react"
import { Card, Col, Divider, Row, Spin, Tooltip } from "antd"
import styles from "./index.module.scss"
import { createFromIconfontCN } from "@ant-design/icons"
import { getFirstPagePerformanceService } from "@/service/performance"
import { useRequest } from "ahooks"

// 自定义icon
const MyIcon = createFromIconfontCN({
    scriptUrl: "//at.alicdn.com/t/c/font_4863405_g6094r1hmqq.js"
})

// const items = [
//     { id: "quickRate", name: "秒开率", value: "75%" },
//     { id: "slowRate", name: "慢开率", value: "2%" },
//     { id: "fsp", name: "首屏性能", value: "962" },
//     { id: "fcp", name: "FCP", value: "815" },
//     { id: "lcp", name: "LCP", value: "772" },
//     { id: "inp", name: "INP", value: "1" },
//     { id: "ttfb", name: "TTFB", value: "134" }
// ]

type PerfDataType = {
    pv: number
    path: string
    instantLoadRate: number // 秒开率
    slowLoadRate: number
    avgFCP: number
    avgLCP: number
    avgINP: number
    avgTTFB: number
}

function objToList(data: PerfDataType) {
    const list: { [key: string]: any }[] = []
    for (const key of Object.keys(data)) {
        if (key === "pv" || key === "path") continue
        // switch key:

        switch (key) {
            case "instantLoadRate":
                list.push({
                    value: data[key as keyof PerfDataType],
                    name: "秒开率",
                    id: "instantLoadRate",
                    explain: "页面在1秒内完成加载的比例"
                })
                break
            case "slowLoadRate":
                list.push({
                    value: data[key as keyof PerfDataType],
                    name: "慢开率",
                    id: "slowLoadRate",
                    explain: "页面加载时间超过一定3秒的比例"
                })
                break
            case "avgFCP":
                list.push({
                    value: data[key as keyof PerfDataType],
                    name: "FCP",
                    id: "FCP",
                    explain: "首次内容绘制时间"
                })
                break
            case "avgLCP":
                list.push({
                    value: data[key as keyof PerfDataType],
                    name: "LCP",
                    id: "LCP",
                    explain: "最大内容绘制时间"
                })
                break
            case "avgINP":
                list.push({
                    value: data[key as keyof PerfDataType],
                    name: "INP",
                    id: "INP",
                    explain: "​​从用户交互（如点击、输入、滚动）到浏览器实际渲染下一帧（Next Paint）的时间​​"
                })
                break
            case "avgTTFB":
                list.push({
                    value: data[key as keyof PerfDataType],
                    name: "TTFB",
                    id: "TTFB",
                    explain: "页面发出请求，到接收第一个字节所花费的毫秒数(首字节时间)"
                })
                break

            default:
                break
        }
    }
    return list
}

const CompPerf: FC = () => {
    const path = "/home/performance"
    async function getFirstPagePerf() {
        const data = (await getFirstPagePerformanceService({ path })) as PerfDataType

        return objToList(data)
    }

    const { loading, data } = useRequest(getFirstPagePerf)

    function renderContent() {
        if (!data || data.length === 0) {
            return <div>Loading...</div>
        }
        return data.map((item, index) => {
            if (item.id === "slowLoadRate" || item.id === "instantLoadRate") {
                return (
                    <Fragment key={item.id}>
                        <Col span={3}>
                            <div className={styles.metric}>
                                <div className={styles["metric-title"]}>
                                    {item.name}
                                    <Tooltip placement="top" title={item.explain}>
                                        <MyIcon type="icon-Help" style={{ cursor: "pointer", marginLeft: "5px" }} />
                                    </Tooltip>
                                </div>
                                <div className={styles["metric-value"]}>{item.value} %</div>
                            </div>
                        </Col>
                        <Divider type="vertical" className={styles.divider} />
                    </Fragment>
                )
            } else {
                return (
                    <Fragment key={item.id}>
                        <Col span={3}>
                            <div className={styles.metric}>
                                <div className={styles["metric-title"]}>
                                    {item.name}
                                    <Tooltip placement="top" title={item.explain}>
                                        <MyIcon type="icon-Help" style={{ cursor: "pointer", marginLeft: "5px" }} />
                                    </Tooltip>
                                </div>
                                <div style={{ color: "#1F8801" }}>
                                    <span className={styles["metric-value"]}>{item.value}</span>
                                    <strong> ms</strong>
                                </div>
                            </div>
                        </Col>
                        {index !== data.length - 1 && <Divider type="vertical" className={styles.divider} />}
                    </Fragment>
                )
            }
        })
    }

    return (
        <Card title="首页综合性能" variant="borderless">
            <Row gutter={[16, 0]} justify="space-around" align="middle" wrap={false} style={{ height: "80px" }}>
                {loading && <Spin />}
                {!loading && renderContent()}
            </Row>
        </Card>
    )
}

export default CompPerf
